import React, { useEffect, useState } from 'react';
import { HlDataCenterStyled } from './style';
import AllView from './cpns/allView';
import titleLeft from '@/assets/images/title-left.png';
import titleRight from '@/assets/images/title-right.png';
import footer from '@/assets/images/footer.png';
import { useDispatch, useSelector } from 'react-redux';

import { get_edrms_type } from '@/store/actions/main';
import { getCurrentFormattedTime } from '@/utils/tools/common';

const HlDataCenter = () => {
  const dispatch = useDispatch();
  const [currnentTime, setCurrentTime] = useState(getCurrentFormattedTime());
  useEffect(() => {
    // dispatch(get_edrms_type());
  }, [dispatch])

  useEffect(() => {
    let timer = setInterval(() => {
      setCurrentTime(getCurrentFormattedTime());
    }, 1000)
    return () => {
      clearInterval(timer);
    }
  }, [currnentTime])
  
  return (
    <HlDataCenterStyled>
      <div className='top'>
        <div className='top-left'>
          <img src={titleLeft} alt='' />
          <div className='time'>
            <span>{currnentTime}</span>
          </div>
        </div>
        <div className='title'>档案管理中心</div>
        <div className='top-right'>
          <img src={titleRight} alt='' />
        </div>
      </div>
      <div className='middle'>{<AllView />}</div>
      <div className='bottom'>
        <img src={footer} alt='' />
      </div>
    </HlDataCenterStyled>
  );
};

export default HlDataCenter;
